<template>
  <div class="member">
    <el-row>
      <el-col :span="14">
        <el-row class="top-card">
          <el-col>
            <div class="card-col" @click="showTables({value: 'jdfx',name:'数量',columns: jdfxColumn,tableData: jdfxData,showButton: false,showQuery: false})">
              <div class="card-num">562</div>
              <div class="card-bot">
                <span class="card-img"><i class="el-icon-document"></i></span>
<!--                <img :src="require(`./images/daiban.png`)" alt="" class="card-img"/>-->
                <span>待办任务</span>
              </div>
            </div>
          </el-col>
          <el-col>
            <div class="card-col" @click="showTables({value: 'yqrw',name:'任务状态统计-负责项目(4)条',columns: yqrwColumn,tableData: yqrwData,showButton: true,showQuery: true})" >
              <div class="card-num">562</div>
              <div class="card-bot">
                <span class="card-img"><i class="el-icon-document-add"></i></span>
<!--                <img :src="require(`./images/yanqi.png`)" alt="" class="card-img"/>-->
                <span>延期任务</span>
              </div>
            </div>
          </el-col>
          <el-col>
            <div class="card-col" @click="showTables({value: 'xcwt',name:'在建项目问题统计-负责项目(4)条',columns: xcwtColumn,tableData: xcwtData,showButton: true,showQuery: true})">
              <div class="card-num">15</div>
              <div class="card-bot">
                <span class="card-img"><i class="el-icon-tickets"></i></span>
<!--                <img :src="require(`./images/daichuli.png`)" alt="" class="card-img"/>-->
                <span>待处理问题</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <div class="box-row">
            <el-tabs v-model="activeOne">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in oneBoxList">
                <el-table
                  :header-cell-style="{backgroundColor: '#e7f6f3'}"
                  :data="taskSchedule"
                  @row-click="showProjectSystem('rwrc')"
                  style="padding: 10px 20px;height: 220px;overflow: auto;">
                  <el-table-column prop="startTime" label="计划开始"></el-table-column>
                  <el-table-column prop="workName" label="任务名称"></el-table-column>
                  <el-table-column prop="schedule" label="进度"></el-table-column>
                  <el-table-column prop="projectName" label="项目名称"></el-table-column>
                  <el-table-column prop="operation" label="操作">
                    <template slot-scope="scope">
                      <el-dropdown @command="(row)=>{showPlanChange({name: '计划变更', value: 'jhbg', row})}" >
                        <el-button type="primary" plain>进度报告<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item :command="{name:'计划变更',value:'jhbg'}">计划变更</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-row>
        <el-row>
          <div class="box-row">
            <el-tabs v-model="activeTwo">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in twoBoxList">
                <el-table :data="participate" :header-cell-style="{backgroundColor: '#e7f6f3'}" @row-click="showProjectSystem('cyxm')" style="padding: 10px 20px;height: 165px;overflow: auto;">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="planEnd" label="计划结束" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="schedule" label="进度"></el-table-column>
                  <el-table-column prop="status" label="状态"></el-table-column>
                  <el-table-column prop="operation" label="操作" width="250px">
                    <template slot-scope="scope">
<!--                      <el-button type="primary" plain @click.native.stop="showProjectSystem('wpsfj')">WPS分解</el-button>-->
                      <el-dropdown @command="showFormModal">
                        <el-button type="primary" plain>更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item :command="{name:'费用支出',value:'fysq',row: scope.row}">费用申请</el-dropdown-item>
                          <el-dropdown-item :command="{name:'进度报告',value:'jdbg',row: scope.row,status:'add'}">进度报告</el-dropdown-item>
                          <el-dropdown-item :command="{name:'问题列表',value:'wtdj',row: scope.row,status:'add'}">问题登记</el-dropdown-item>
                          <el-dropdown-item :command="{name:'风险登记册',value:'fxdj',row: scope.row,status:'add'}">风险登记</el-dropdown-item>
                          <el-dropdown-item :command="{name:'相关方登记册',value:'xgfdj',row: scope.row,status:'add'}">相关方登记</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize" style="margin: 0 25px 28px;"/>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-row>
        <el-row>
          <div class="box-row">
            <el-tabs v-model="activeThree">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in threeBoxList">
                <el-table :data="riskData" :header-cell-style="{backgroundColor: '#e7f6f3'}" style="padding: 10px 20px;height: 220px;overflow: auto;"
                          @row-click="(row)=>{showFormModal({name: '风险登记册', value: 'fzfx', row: row,status:'read'})}" v-if="item.value=='first'">
                  <el-table-column prop="start" label="预计发生" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="riskName" label="风险名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="riskType" label="风险类型" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="riskStatus" label="风险状态" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="operation" label="操作">
                    <template slot-scope="scope">
                      <el-button type="primary" plain @click.native.stop="showFormModal({name:'风险登记册',value:'fxdj',row: scope.row,status:'edit'})">更新</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-table :data="stakeholderData" :header-cell-style="{backgroundColor: '#e7f6f3'}" style="padding: 10px 20px;height: 220px;overflow: auto;"
                          @row-click="(row)=>{showFormModal({name: '相关方登记册', value: 'gjxgf', row:row,status:'read'})}" v-if="item.value=='second'">
                  <el-table-column prop="name" label="相关方名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="duty" label="职务" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="impact" label="权利影响" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="concernLevel" label="关心程度" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="strategy" label="管理策略" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="assess" label="评估参与度" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="present" label="当前参与度" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="operation" label="操作">
                    <template slot-scope="scope">
                      <el-button type="primary" plain @click.native.stop="showFormModal({name:'相关方登记册',value:'xgfdj',row: scope.row,status:'edit'})">更新</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-table :data="questionData" :header-cell-style="{backgroundColor: '#e7f6f3'}" style="padding: 10px 20px;height: 220px;overflow: auto;"
                          @row-click="(row)=>{showFormModal({name: '问题列表', value: 'dclwt', row: row,status:'read'})}" v-if="item.value=='third'">
                  <el-table-column prop="date" label="新增日期" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="question" label="问题名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="type" label="问题类型" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="state" label="问题说明" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="operation" label="操作">
                    <template slot-scope="scope">
                      <el-button type="primary" plain @click.native.stop="showFormModal({name:'问题列表',value:'wtdj',row: scope.row,status:'edit'})">处理</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-table :data="abarbeitungData" :header-cell-style="{backgroundColor: '#e7f6f3'}" style="padding: 10px 20px;height: 220px;overflow: auto;"
                          @row-click="(row)=>{showFormModal({name: '整改清单', value: 'zgqd', row:row,status:'read'})}" v-if="item.value=='fourth'">
                  <el-table-column prop="time" label="整改期限" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="cause" label="整改原因" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="request" label="整改要求" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="operation" label="操作">
                    <template slot-scope="scope">
                      <el-button type="primary" plain @click.native.stop="showFormModal({name:'整改反馈',value:'zgbg',row: scope.row,status:'edit'})">整改反馈</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-row>
      </el-col>
      <el-col :span="10">
        <el-row>
          <div class="box-row" style="margin: 0">
            <el-tabs v-model="activeFour">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in fourBoxList">
                <el-table :data="todoData" :show-header="false" @row-click="(row)=>{showPlanChange({name: '计划变更', value: 'jhbg', row})}"
                style="padding:0 20px;height: 165px;overflow: auto;">
                  <el-table-column prop="time" label="" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="cause" label="" show-overflow-tooltip v-if="item.value!=='second'"></el-table-column>
                  <el-table-column prop="request" label="" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="projectName" label="" show-overflow-tooltip v-if="item.value!=='second'"></el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-row>
        <el-row>
          <div class="box-row" style="margin: 16px 0 0 0">
            <el-tabs v-model="activeFive">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in fiveBoxList">
                <undertake-tasks></undertake-tasks>
              </el-tab-pane>
            </el-tabs>
            <el-button style="position: absolute;right: 33px;top: 27px;color: #303133;" type="text">更多</el-button>
          </div>
        </el-row>
        <el-row>
          <div class="box-row" style="margin: 16px 0 0 0">
            <el-tabs v-model="activeSix">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in sixBoxList">
                <job-hour></job-hour>
              </el-tab-pane>
            </el-tabs>
            <i class="el-icon-more" style="position: absolute;right: 33px;top: 27px;color: #303133;"></i>
          </div>
        </el-row>
      </el-col>
    </el-row>

    <el-dialog :title="modalTitle" :visible.sync="modalState" @close="closeModal" :width="modalWidth" :close-on-click-modal="false">
      <quick-dialog :modalRow="modalRow" v-if="modalType=='form'"></quick-dialog>
      <plan-change :modalRow="modalRow" v-if="modalType=='change'"></plan-change>
      <table-dialog :modalRow="modalRow" v-if="modalType=='table'" ></table-dialog>
      <system-dialog :modalRow="modalRow" v-if="modalType=='system'"></system-dialog>
    </el-dialog>
  </div>
</template>

<script>
import UndertakeTasks from "@/views/member/components/undertakeTasks";
import JobHour from "@/views/member/components/jobHour";
import QuickDialog from "@/views/leader/components/quickDialog";
import PlanChange from "@/views/leader/components/planChange";
import TableDialog from "@/views/leader/components/tableDialog";
import SystemDialog from "@/views/leader/components/systemDialog";
export default {
  name: "index",
  components: {SystemDialog, TableDialog, PlanChange, QuickDialog, JobHour, UndertakeTasks},
  data() {
    return {
      modalTitle:'',
      modalState:false,
      modalWidth:'',
      taskSchedule: [
        {startTime: '2024-01-13', workName: '防沙治沙', schedule: '10%', projectName: '风光一体化防沙治沙'},
        {startTime: '2024-01-13', workName: '绿化改造', schedule: '0%', projectName: '三北六期'},
        {startTime: '2024-01-13', workName: '苗木栽培', schedule: '100%', projectName: '蚂蚁森林'},
        {startTime: '2024-01-13', workName: '机器人造林', schedule: '60%', projectName: '蓝旗机器人造林'},
      ],
      participate: [
        {projectName:'风光一体化防沙治沙',planEnd:'2024-06-01',schedule:'10%',status:'执行'},
        {projectName:'三北六期',planEnd:'2024-06-01',schedule:'0%',status:'执行'},
        {projectName:'蚂蚁森林',planEnd:'2024-06-01',schedule:'100%',status:'执行'},
        {projectName:'蓝旗机器人造林',planEnd:'2024-06-01',schedule:'60%',status:'执行'},
      ],
      riskData:[
        {start: '2022-01-01',projectName: '风光一体化防沙治沙',riskName:'价格上涨',riskType:'成本风险',riskLevel:'二级',riskStatus:'未发生'},
        {start: '2022-01-01',projectName: '三北六期',riskName:'项目人员离开',riskType:'人事风险',riskLevel:'二级',riskStatus:'未发生'},
        {start: '2022-01-01',projectName: '蚂蚁森林',riskName:'价格上涨',riskType:'成本风险',riskLevel:'二级',riskStatus:'未发生'},
        {start: '2022-01-01',projectName: '蓝旗机器人造林',riskName:'价格上涨',riskType:'成本风险',riskLevel:'二级',riskStatus:'未发生'},
      ],
      stakeholderData:[
        {name: '王XX',duty:'助理', impact:'8级',concernLevel:'较关心',strategy:'支持',assess:'中立'},
        {name: '李XX',duty:'财务总监', impact:'7级',concernLevel:'很关心',strategy:'支持',assess:'中立'},
        {name: '王X',duty:'信息总监', impact:'8级',concernLevel:'教关心',strategy:'支持',assess:'支持'},
        {name: '张XX',duty:'财务总监', impact:'8级',concernLevel:'教关心',strategy:'支持',assess:'支持'},
      ],
      questionData:[
        {date:'2022-01-01',projectName:'风光一体化防沙治沙',question:'天气预测',type:'自然问题',state:'天气影响大'},
        {date:'2022-01-01',projectName:'三北六期',question:'天气预测',type:'自然问题',state:'天气影响大'},
        {date:'2022-01-01',projectName:'蚂蚁森林',question:'天气预测',type:'自然问题',state:'天气影响大'},
        {date:'2022-01-01',projectName:'蓝旗机器人造林',question:'天气预测',type:'自然问题 ',state:'天气影响大'},
      ],
      abarbeitungData:[
        {time:'2024-01-13',cause:'天气影响大',request:'符合要求',projectName:'风光一体化防沙治沙'},
        {time:'2024-01-13',cause:'天气影响大',request:'符合要求',projectName:'三北六期'},
        {time:'2024-01-13',cause:'天气影响大',request:'符合要求',projectName:'蚂蚁森林'},
        {time:'2024-01-13',cause:'天气影响大',request:'符合要求',projectName:'蓝旗机器人造林'},
      ],
      todoData:[
        {time:'风光一体化防沙治沙-工程进度缓慢-2024-03-04',cause:'2024-03-04 13:23:59',request:'王XX',projectName:'防沙治沙'},
        {time:'三北六期-整改通知-2024-03-04',cause:'2024-03-04 13:23:59',request:'李XX',projectName:'绿化改造'},
        {time:'蚂蚁森林-森林覆盖率提升-2024-03-04',cause:'2024-03-04 13:23:59',request:'王X',projectName:'苗木栽培'},
        {time:'蓝旗机器人造林-机器人设备效率提升-2024-03-04',cause:'2024-03-04 13:23:59',request:'张XX',projectName:'机器人造林'},
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total:0,
      activeThree: 'first',
      activeTwo: 'first',
      activeOne: 'first',
      activeFour: 'first',
      activeFive: 'first',
      activeSix: 'first',
      threeBoxList: [
        {label: '负责风险', value: 'first'},
        {label: '跟进相关方', value: 'second'},
        {label: '待处理问题 ', value: 'third'},
        {label: '待整改清单', value: 'fourth'},
      ],
      twoBoxList: [
        {label: '参与项目', value: 'first'},
      ],
      oneBoxList: [
        {label: '任务日程', value: 'first'},
      ],
      fourBoxList: [
        {label: '待办事项', value: 'first'},
        {label: '已办事项', value: 'second'},
        {label: '待发事项 ', value: 'third'},
        {label: '已发事项', value: 'fourth'},
      ],
      fiveBoxList: [
        {label: '负责任务', value: 'first'},
      ],
      sixBoxList: [
        {label: '项目工时', value: 'first'},
      ],
      modalRow:{},
      modalType:'',
      jdfxColumn:[
        { prop: 'status', label: '任务状态', align: 'center',fixed:'left'},
        { prop: 'xmmc', label: '项目名称', align: 'center'},
        { prop: 'fylx', label: '数量', align: 'center'},
      ],
      jdfxData:[],
      yqrwColumn:[
        { prop: 'xmmc', label: '项目名称', align: 'center',fixed:'left'},
        { prop: 'rwzs', label: '任务总数', align: 'center'},
        { prop: 'db', label: '待办', align: 'center'},
        { prop: 'jxz', label: '进行中', align: 'center'},
        { prop: 'yzt', label: '已暂停', align: 'center'},
        { prop: 'yzz', label: '已终止', align: 'center'},
        { prop: 'ywc', label: '已完成', align: 'center'},
        { prop: 'yyq', label: '其中：已延期', align: 'center'},
      ],
      yqrwData:[
        {xmmc:'风光一体化防沙治沙',rwzs:'12',db:'0',jxz:'3',yzt:"1",yzz:'5',ywc:'3',yyq:'0'},
        {xmmc:'蚂蚁森林苗木栽培',rwzs:'8',db:'1',jxz:'3',yzt:"0",yzz:'0',ywc:'4',yyq:'0'},
        {xmmc:'三北六七绿化改造',rwzs:'15',db:'1',jxz:'8',yzt:"1",yzz:'2',ywc:'4',yyq:'0'},
        {xmmc:'蓝旗机器人造林',rwzs:'10',db:'0',jxz:'5',yzt:"1",yzz:'0',ywc:'4',yyq:'0'},
      ],
      xcwtColumn:[
        { prop: 'xmmc', label: '项目名称', align: 'center',fixed:'left'},
        { prop: 'xcwt', label: '待处理问题', align: 'center',fixed:'left'},
        { prop: 'yjj', label: '已解决', align: 'center',fixed:'left'},
        { prop: 'wtzs', label: '问题总数', align: 'center',fixed:'left'},
      ],
      xcwtData:[
        {xmmc:'风光一体化防沙治沙',wtzs:'12',xcwt:'0',yjj:'12'},
        {xmmc:'蚂蚁森林苗木栽培',wtzs:'8',xcwt:'1',yjj:'7'},
        {xmmc:'三北六七绿化改造',wtzs:'5',xcwt:'0',yjj:'5'},
        {xmmc:'蓝旗机器人造林',wtzs:'10',xcwt:'5',yjj:'5'},
      ]
    }
  },
  mounted() {
    this.total = this.participate.length
  },
  methods: {
    closeModal(){
      this.modalState = false
    },
    //打开quick-dialog组件
    showFormModal(data){
      this.modalState = true
      this.modalTitle = ''
      this.modalRow = data
      this.modalType = 'form'
      if( data.value=='gjxgf' || data.value=='dclwt' || data.value=='zgqd' || data.value=='fzfx' || data.value=='wtdj'|| data.value=='fxdj'|| data.value=='xgfdj' ){
        this.modalWidth = '60%'
      }else{
        this.modalWidth = '80%'
      }
    },
    //计划变更
    showPlanChange(data){
      this.modalState = true
      this.modalTitle = ''
      this.modalRow = data
      this.modalType = 'change'
      this.modalWidth = '60%'
    },
    //打开table-dialog组件
    showTables(data){
      this.modalState = true
      this.modalTitle = data.name
      this.modalRow = data
      this.modalType = 'table'
      this.modalWidth = '70%'
    },
    //打开system-dialog组件
    showProjectSystem(data){
      this.modalState = true
      this.modalTitle = ''
      this.modalRow = data
      this.modalType = 'system'
      this.modalWidth = '80%'
    },
  }
}
</script>

<style scoped lang="scss">
.member {
  margin: 15px;

  ::v-deep {
    .el-dialog__body{
      padding: 20px 0 0 0;
    }

    .el-tabs__header {
      margin: 0 0 0 20px;
    }

    .el-tabs__item {
      font-size: 16px;
    }

    .el-tabs__item.is-active {
      font-weight: 600;
      font-size: 16px;
    }

    .el-tabs__nav-wrap::after {
      height: 0;
    }

    .el-tabs__active-bar {
      height: 0;
    }

    .el-table::before {
      height: 0;
    }

    .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
      border-bottom: 0 solid #dfe6ec;
    }
  }
}

.top-card {
  display: flex;
  justify-content: space-between;
}

.card-col {
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  border: 2px solid #fff;
  margin-right: 16px;
  box-shadow: 0 0 14px 0 rgba(28, 111, 236, .15);
  height: 128px;
}

.card-col:hover{
  cursor: pointer;
  border-color: #a0ddcd;
}

.card-num {
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  color: #11A983;
  margin-top: 25px;
}

.card-img {
 /* height: 22px;
  width: 22px;*/
  margin-right: 10px;
  color: #11A983;
  font-size: 21px;
}

.card-bot {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}

.box-row {
  margin: 16px 16px 0 0;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 0 14px 0 rgba(28, 111, 236, .15);
  color: #555;
  background-color: #fff;
  padding-top: 10px;
}

.box-title {
  height: 45px;
  padding: 10px 20px 0;
  color: #0F2566 !important;
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
}

</style>
